<template>
  <div class="indexContent">
    <div :class="{index:showCityList}"></div>
    <div class="index-top" ref="indexTop">
      <header>
        <!--广告组件-->
        <advertisement @close="close"></advertisement>

        <section class="middle">
          <div>
            <a href="#">
              <img src="../../common/images/logo.png" class="logo">
            </a>
          </div>
          <div class="city-list-btn" >
            <a href="javascript:;" class="clearfix" @click="showList">
              <span class="fl">{{showCityName}}</span>

              <transition name="rotate">
                <img src="../../common/images/arrow-bottom.png" class="arrow-bottom fr" v-if="!showCityList">
              </transition>

            </a>
          </div>
          <div class="search-box">
            <label for="search"><img src="../../common/images/search.png"></label>
            <input type="text" id="search" class="search" placeholder="唯品会XCOSMO百大好物">
          </div>
          <div>
            <router-link to="/user"><img src="../../common/images/user-i.png"></router-link>
          </div>
        </section>

      </header>

      <nav>
          <scroll class="scroll-content">
              <ul class="nav-list">
                <li v-for="(item,index) in nav" :class="{active: currentPageIndex === index }"
                    @click="currentPageIndex = index">
                  <a href="#">{{item.title}}</a>
                </li>
              </ul>
          </scroll>
      </nav>
    </div>

    <city-list class="city-list-com" v-if="showCityList"></city-list>



    <div class="main-scroll">

      <scroll ref="scroll"
              class="scroll-content"
              :data="imgList"
              :pulldown="pulldown"
              @pulldown="loadData"
             >

        <main  ref="indexContent" :class="{marginTop:marginTop}">
          <!--Loading-->
          <div class="loading-wrapper" v-show="isPullDown"><img src="../../common/images/loading.gif" class="loading-icon"></div>

          <!--轮播图组件-->
          <div>
            <div v-if="imgList.length" class="slider-wrapper" ref="sliderWrapper">
              <slider>
                <div v-for="item in imgList">
                  <a :href="item.addressUrl">
                    <img class="needsclick" @load="loadImage" :src="item.imgUrl">
                  </a>
                </div>
              </slider>
            </div>
          </div>

          <div><img src="../../common/images/hongbao.gif"></div>
          <div class="pro-list">
            <ul>
              <li v-for="item in proList"><a href="#"><img v-lazy="item"></a></li>
            </ul>
          </div>

          <div>
            <ul>
              <li>
                <div>
                  <a href="#"><img src="../../common/images/newVip.jpg"></a>
                  <div class="new-people">
                    <a href="#" class="left fl"><img src="../../common/images/new-left.jpg"></a>
                    <div>
                      <a href="#"><img src="../../common/images/new-right-b.jpg"></a>
                      <a href="#"><img src="../../common/images/new-right-t.jpg"></a>
                    </div>
                  </div>
                </div>
              </li>

              <li v-for="item in proList2">
                <div>
                  <div><a :href="item.url1"><img v-lazy="item.img1"></a></div>
                  <div class="flex">
                    <a :href="item.url2"><img v-lazy="item.img2"></a>
                    <a :href="item.url3"><img v-lazy="item.img3"></a>
                    <a :href="item.url4"><img v-lazy="item.img4"></a>
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <div>
            <div><a href="#"><img src="../../common/images/item-3.jpg"></a></div>
            <div class="flex">
              <a href="#"><img src="../../common/images/item-3-1.jpg"></a>
              <a href="#"><img src="../../common/images/item-3-2.jpg"></a>
              <a href="#"><img src="../../common/images/item-3-3.jpg"></a>
            </div>
            <div class="flex">
              <a href="#"><img src="../../common/images/item-3-4.jpg"></a>
              <a href="#"><img src="../../common/images/item-3-5.jpg"></a>
              <a href="#"><img src="../../common/images/item-3-6.jpg"></a>
            </div>
          </div>

          <!--//item-4-->
          <div>
            <div><a href="#"><img src="../../common/images/item-4.jpg"></a></div>
            <div class="flex">
              <a href="#"><img src="../../common/images/item-4-1.jpg"></a>
              <a href="#"><img src="../../common/images/item-4-2.jpg"></a>
              <a href="#"><img src="../../common/images/item-4-3.jpg"></a>
            </div>
            <div class="flex">
              <a href="#"><img src="../../common/images/item-4-4.jpg"></a>
              <a href="#"><img src="../../common/images/item-4-5.jpg"></a>
              <a href="#"><img src="../../common/images/item-4-6.jpg"></a>
            </div>
          </div>
          <!--item-5-->
          <div>
            <div class="flex">
              <a href="#"><img src="../../common/images/item-5-1.jpg"></a>
              <a href="#"><img src="../../common/images/item-5-2.jpg"></a>
              <a href="#"><img src="../../common/images/item-5-3.jpg"></a>
            </div>
          </div>
          <div>
            <a href="#"><img src="../../common/images/item-6.jpg"></a>
          </div>

          <!--item-6-->
          <div class="item-6">
            <p class="item-6-title">今日特卖 · 每天早10点 晚8点上新</p>
          </div>
          <div class="pro-category-1">
            <a href="#"><img src="../../common/images/item-6-1.jpg"></a>
            <div class="title">
              <span class="des">狂欢圣诞 好礼速递</span>
              <span class="last-day fr">剩两天</span>
            </div>
          </div>
          <div class="pro-category-1">
            <a href="#"><img src="../../common/images/item-6-2.jpg"></a>
            <div class="title">
              <span class="des">UNDER ARMOUR品牌钜献</span>
              <span class="last-day fr">剩两天</span>
            </div>
          </div>
          <div class="pro-category-1">
            <a href="#"><img src="../../common/images/item-6-3.jpg"></a>
          </div>
          <div>
            <a href="#"><img src="../../common/images/item-7-1.jpg"></a>
          </div>

          <div>
            <a href="#"><img src="../../common/images/item-7-2.jpg"></a>
          </div>

          <div class="pro-category-1">
            <a href="#"><img src="../../common/images/item-8.jpg"></a>
            <div class="title">
              <span class="des">UNDER ARMOUR品牌钜献</span>
              <span class="last-day fr">剩两天</span>
            </div>
          </div>
          <div class="pro-category-1">
            <a href="#"><img src="../../common/images/item-9.jpg"></a>
            <div class="title">
              <span class="des">UNDER ARMOUR品牌钜献</span>
              <span class="last-day fr">剩两天</span>
            </div>
          </div>


          <!--item-7-->
          <div class="pro-category-2">
            <ul>
              <li class="product">
                <a href="#"><img src="../../common/images/pro-item-7.jpg"></a>
                <div class="title">
                  <div>
                    <span class="des"><span class="disc">1</span>折起 太平鸟PEACEBIRD女装专场</span>
                    <span class="last-day fr">剩两天</span>
                  </div>
                  <div class="small-tip">
                    <img src="../../common/images/smalltip.png">
                    <span class="tip-text">
                    满498减100，上不封顶
                  </span>
                  </div>
                </div>
              </li>

              <li class="product">
                <a href="#"><img src="../../common/images/pro-item-7.jpg"></a>
                <div class="title">
                  <div>
                    <span class="des"><span class="disc">1</span>折起 太平鸟PEACEBIRD女装专场</span>
                    <span class="last-day fr">剩两天</span>
                  </div>
                  <div class="small-tip">
                    <img src="../../common/images/smalltip.png">
                    <span class="tip-text">
                    满498减100，上不封顶
                  </span>
                  </div>
                </div>
              </li>



              <li class="product">
                <a href="#"><img src="../../common/images/pro-item71.jpg"></a>
                <div class="title">
                  <div>
                    <span class="des"><span class="disc">1</span>折起 太平鸟PEACEBIRD女装专场</span>
                    <span class="last-day fr">剩两天</span>
                  </div>
                  <div class="small-tip">
                    <img src="../../common/images/smalltip.png">
                    <span class="tip-text">
                    满498减100，上不封顶
                  </span>
                  </div>
                </div>
              </li>

              <li class="product">
                <a href="#"><img src="../../common/images/pro-item72.jpg"></a>
                <div class="title">
                  <div>
                    <span class="des"><span class="disc">1</span>折起 太平鸟PEACEBIRD女装专场</span>
                    <span class="last-day fr">剩两天</span>
                  </div>
                  <div class="small-tip">
                    <img src="../../common/images/smalltip.png">
                    <span class="tip-text">
                    满498减100，上不封顶
                  </span>
                  </div>
                </div>
              </li>
              <li class="product">
                <a href="#"><img src="../../common/images/pro-item73.jpg"></a>
                <div class="title">
                  <div>
                    <span class="des"><span class="disc">1</span>折起 太平鸟PEACEBIRD女装专场</span>
                    <span class="last-day fr">剩两天</span>
                  </div>
                  <div class="small-tip">
                    <img src="../../common/images/smalltip.png">
                    <span class="tip-text">
                    满498减100，上不封顶
                  </span>
                  </div>
                </div>
              </li>
              <li class="product">
                <a href="#"><img src="../../common/images/pro-item74.jpg"></a>
                <div class="title">
                  <div>
                    <span class="des"><span class="disc">1</span>折起 太平鸟PEACEBIRD女装专场</span>
                    <span class="last-day fr">剩两天</span>
                  </div>
                  <div class="small-tip">
                    <img src="../../common/images/smalltip.png">
                    <span class="tip-text">
                    满498减100，上不封顶
                  </span>
                  </div>
                </div>
              </li>

            </ul>
          </div>

          <div class="pro-category-1">
              <ul>
                <li>
                  <a href="#"><img src="../../common/images/item-9.jpg"></a>
                  <div class="title">
                    <span class="des">UNDER ARMOUR品牌钜献</span>
                    <span class="last-day fr">剩两天</span>
                  </div>
                </li>
                <li>
                  <a href="#"><img src="../../common/images/item-9.jpg"></a>
                  <div class="title">
                    <span class="des">UNDER ARMOUR品牌钜献</span>
                    <span class="last-day fr">剩两天</span>
                  </div>
                </li>
                <li>
                  <a href="#"><img src="../../common/images/item-9.jpg"></a>
                  <div class="title">
                    <span class="des">UNDER ARMOUR品牌钜献</span>
                    <span class="last-day fr">剩两天</span>
                  </div>
                </li>
                <li>
                  <a href="#"><img src="../../common/images/item-9.jpg"></a>
                  <div class="title">
                    <span class="des">UNDER ARMOUR品牌钜献</span>
                    <span class="last-day fr">剩两天</span>
                  </div>
                </li>
              </ul>
          </div>

        </main>
      </scroll>
      <!--购物车组件-->

    </div>
    <div class="aside">
      <cart-btn></cart-btn>
      <back-top @goTop="goTop"></back-top>
    </div>

    <router-view></router-view>
  </div>

</template>

<script>
  import bus from '../../bus'
  import cityList from '../../base/cityList'
  import slider from '../../base/slider'
  import {getSlider} from '../../api/slider'
  import scroll from '../../base/scroll'
  import cartBtn from '../../base/cartBtn'
  import backTop from '../../base/backTop'
  import advertisement from 'base/advertisement'


  export default {
    data() {
      return {
        showCityList: false,
        showCityName:"河南省",
        show:false,
        adense: true,
        marginTop: false,
        currentPageIndex: 0,
        pulldown:true,
        isPullDown:false,
        nav:[
          {
            url:'1',
            title:'今日推荐'
          },
          {
            url:'2',
            title:'时尚'
          },
          {
            url:'3',
            title:'美妆'
          },
          {
            url:'4',
            title:'居家'
          },
          {
            url:'5',
            title:'母婴'
          },
          {
            url:'6',
            title:'国际'
          },
          {
            url:'7',
            title:'唯品.奢'
          },
          {
            url:'8',
            title:'生活'
          },
        ],
        imgList: [],
        proList: [
          "./src/common/images/prolist1.png",
          "./src/common/images/prolist2.png",
          './src/common/images/prolist3.png',
          './src/common/images/prolist4.png',
          './src/common/images/prolist5.png',
          './src/common/images/prolist6.png',
          './src/common/images/prolist7.png',
          './src/common/images/prolist8.png',
          './src/common/images/prolist9.png',
          './src/common/images/prolist10.png',
        ],
        proList2: [
          {
            img1: 'src/common/images/item-1.jpg',
            img2: 'src/common/images/item-1-1.jpg',
            img3: 'src/common/images/item-1-2.jpg',
            img4: 'src/common/images/item-1-3.jpg',
            url1: '../',
            url2: '../',
            url3: '../',
            url4: '../'
          },
          {
            img1: 'src/common/images/item-2.jpg',
            img2: 'src/common/images/item-2-1.jpg',
            img3: 'src/common/images/item-2-2.jpg',
            img4: 'src/common/images/item-2-3.jpg',
            url1: '../',
            url2: '../',
            url3: '../',
            url4: '../'
          }


        ],
      }
    },
    components: {
      cityList,
      slider,
      scroll,
      cartBtn,
      backTop,
      advertisement
    },

    created() {
      document.title = '首页'
      bus.$on('closeList', () => {
        this.showCityList = !this.showCityList
      });
      this._getSlider();
      this._cityName()
    },
    methods: {
      showList() {
        this.showCityList = true;
      },
      close() {
        this.adense = false;
        setTimeout(() => {
          this.marginTop = true;
      }, 500)
      },
      _getSlider() {

        getSlider().then((res) => {
          this.imgList = res.imgList;
        })
      },
      loadImage() {
        if (!this.checked) {
          this.checked = true;
          this.$refs.scroll.refresh();
        }
      },
      goTop() {
        this.$refs.scroll.scrollTo(0, 0, 1000)
      },
      loadData(){
        this.isPullDown = true;
        alert("页面开始刷新");
        this.$refs.scroll.refresh();
        setTimeout(()=>{
          this.isPullDown = false
        })
      },
      _cityName(){
        bus.$on('cityName',(data)=>{
          this.showCityName = data
          setTimeout(()=>{
            this.showCityList = false
          },400)
        })

      },

    },


  }
</script>


<style type="text/css" rel="stylesheet/sass" lang="scss">

  @import "../../common/style/scss/index.scss";

  .rotate-enter-active, .rotate-leave-active {
    transition: all .5s ease;
  }

  .rotate-enter, .rotate-leave-to {
    transform: rotate(180deg);
  }

  .slideUp-enter-active, .slideUp-leave-active {
    transition: all .5s ease;
  }

  .slideUp-enter, .slideUp-leave-to {
    transform: translate3d(0, -80px, 0);
  }


</style>
